<template>
    <view class="container paddingBottomBar">
        <header-bar :config="config"></header-bar>
        <view class="main">
            <coupon-list
                v-if="loadOk"
                :coupons="coupons"
                :data="data"
                showSelect
                :selectId="selectId"
                :height="listHeight"
                @selectFn="selectFn">
            </coupon-list>
        </view>
        <view class="bottom-bar" @click="noUse">
            <view class="flex-fill"></view>
            <button class="btn btn-main-hollow">不使用</button>
        </view>
    </view>
</template>

<script>
import couponList from "@/pages_shop/components/coupon/coupon-list.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"

export default {
    components: {
        couponList,
    },
    data() {
        return {
            config: {
                title: "选择优惠券",
                centerSlot: true,
            },
            data: {
                title: "未使用",
                state: 0,
                MoneyLimit: 0,
            },
            tabIndex: 0,
            listHeight: 0,
            loadOk: false,
            eventChannel: null,
            selectId: "",
            coupons: [],
        }
    },
    onLoad(option) {
        console.log(option)
        if (option.id) {
            this.selectId = option.id
        }
        if (option.coupons) {
            this.coupons = JSON.parse(decodeURIComponent(option.coupons))
            this.$forceUpdate()
        }
        // #ifdef APP-NVUE
        this.eventChannel = this.$scope.eventChannel // 兼容APP-NVUE
        // #endif
        // #ifndef APP-NVUE
        this.eventChannel = this.getOpenerEventChannel()
        // #endif
    },
    mounted() {
        this.getListHeight()
    },
    methods: {
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                this.tabIndex = index
            }
        },
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.loadOk = true
            })
        },
        selectFn(e) {
            this.eventChannel.emit("selectEvent", e)
            this.easyGoBack()
        },
        noUse() {
            this.eventChannel.emit("selectEvent", null)
            this.easyGoBack()
        },
    },
}
</script>

<style lang="scss">
.bottom-bar {
    display: flex;
    flex-direction: row;

    .btn {
        margin-left: 0;
        border-radius: 100rpx;
        height: 80rpx;
        width: 220rpx;
    }
}
</style>
